@import '../css/variable'

#start-loading
    position absolute
    background rgba(20, 20, 20, 0.95)
    height 100%
    width 100%
    z-index 10
    opacity 1
    transition opacity 200ms linear
    > div
        border-radius 25px
        background-color #222
        box-shadow 0 0 10px #000000
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        margin auto
        width 200px
        height 180px
        text-align center
        h3
            font-family font-text
            margin 0
            padding 0
            font-size 18px
            font-weight normal
            line-height 60px
            color #999
            text-shadow 1px 1px 2px black
    .loader
        display inline-block
        width 30px
        height 30px
        position relative
        border 4px solid #fff
        border-radius 5px
        animation loader 2s infinite ease,
                  border-colors 2s infinite ease
    .loader-inner
        vertical-align top
        display inline-block
        width 100%
        background-color #fff
        animation loader-inner 2s infinite ease-in,
                  background-colors 2s infinite ease

@keyframes border-colors
    0%
        border-color #4285F4
    25%
        border-color #DE3E35
    50%
        border-color #F7C223
    75%
        border-color #1B9A59
    100%
        border-color #4285F4

@keyframes background-colors
    0%
        background-color #4285F4
    25%
        background-color #DE3E35
    50%
        background-color #F7C223
    75%
        background-color #1B9A59
    100%
        background-color #4285F4

@keyframes loader
    0%
        transform rotate(0deg)
    25%
        transform rotate(180deg)
    50%
        transform rotate(180deg)
    75%
        transform rotate(360deg)
    100%
        transform rotate(360deg)

@keyframes loader-inner
    0%
        height 0%
    25%
        height 0%
    50%
        height 100%
    75%
        height 100%
    100%
        height 0%